<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>克苏鲁秘语 - 探索神话与未知的边界</title>
  <script src="js/tailwindcss.js"></script>
  <link href="css/font-awesome.min.css" rel="stylesheet">
  <!-- 引入APlayer CSS -->
  <link rel="stylesheet" href="css/APlayer.min.css">
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          colors: {
            primary: '#8B5CF6',
            secondary: '#EC4899',
            accent: '#10B981',
            dark: '#111827',
            light: '#F9FAFB',
            mythic: {
              50: '#F3F4F6',
              100: '#E5E7EB',
              200: '#D1D5DB',
              300: '#9CA3AF',
              400: '#6B7280',
              500: '#4B5563',
              600: '#374151',
              700: '#1F2937',
              800: '#111827',
              900: '#030712',
            },
            cosmic: {
              50: '#F5F3FF',
              100: '#EDE9FE',
              200: '#DDD6FE',
              300: '#C4B5FD',
              400: '#A78BFA',
              500: '#8B5CF6',
              600: '#7C3AED',
              700: '#6D28D9',
              800: '#5B21B6',
              900: '#4C1D95',
            }
          },
          fontFamily: {
            mythos: ['Georgia', 'serif'],
            cosmic: ['"Arial Narrow"', 'sans-serif'],
          },
          backgroundImage: {
            'mythic-pattern': "url('https://picsum.photos/id/1048/1200/800')",
            'cosmic-void': "url('https://picsum.photos/id/1019/1200/800')",
          },
          animation: {
            'float': 'float 6s ease-in-out infinite',
            'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
            'glow': 'glow 2s ease-in-out infinite alternate',
          },
          keyframes: {
            float: {
              '0%, 100%': { transform: 'translateY(0)' },
              '50%': { transform: 'translateY(-10px)' },
            },
            glow: {
              '0%': { textShadow: '0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0073e6, 0 0 20px #0073e6' },
              '100%': { textShadow: '0 0 10px #fff, 0 0 20px #fff, 0 0 30px #0073e6, 0 0 40px #0073e6' },
            }
          }
        },
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-shadow {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
      }
      .text-shadow-glow {
        text-shadow: 0 0 10px rgba(139, 92, 246, 0.7);
      }
      .bg-blur {
        backdrop-filter: blur(8px);
      }
      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }
      .animate-float-slow {
        animation: float 8s ease-in-out infinite;
      }
      .timeline-line {
        position: absolute;
        left: 19px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: linear-gradient(to bottom, #8B5CF6, #EC4899);
      }
      .timeline-dot {
        position: absolute;
        left: 12px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #8B5CF6;
        border: 2px solid white;
        z-index: 10;
      }
    }
  </style>
</head>

<body
  class="bg-mythic-50 dark:bg-mythic-900 text-mythic-800 dark:text-mythic-100 transition-colors duration-300 font-mythos">
  <!-- 导航栏 -->
  <header class="fixed w-full top-0 z-50 transition-all duration-300" id="navbar">
    <div
      class="container mx-auto px-4 py-3 flex items-center justify-between bg-white/80 dark:bg-mythic-800/80 bg-blur">
      <a href="index.html" class="flex items-center space-x-2">
        <span class="text-2xl text-primary dark:text-cosmic-400 font-bold animate-pulse-slow">
          <i class="fa fa-eye"></i>
        </span>
        <span class="text-xl font-cosmic tracking-wider">克苏鲁秘语</span>
      </a>

      <!-- 桌面导航 -->
      <nav class="hidden md:flex items-center space-x-8">
        <a href="index.html" class="hover:text-primary dark:hover:text-cosmic-400 transition-colors duration-300">首页</a>
        <a href="tags.html" class="hover:text-primary dark:hover:text-cosmic-400 transition-colors duration-300">标签云</a>
        <a href="search.html"
          class="hover:text-primary dark:hover:text-cosmic-400 transition-colors duration-300">搜索</a>
        <a href="about.html" class="hover:text-primary dark:hover:text-cosmic-400 transition-colors duration-300">关于</a>
      </nav>

      <!-- 移动端菜单按钮 -->
      <button class="md:hidden text-2xl" id="menu-toggle">
        <i class="fa fa-bars"></i>
      </button>

      <!-- 主题切换按钮 -->
      <button id="theme-toggle"
        class="ml-4 p-2 rounded-full hover:bg-mythic-200 dark:hover:bg-mythic-700 transition-colors duration-300">
        <i class="fa fa-moon-o dark:hidden"></i>
        <i class="fa fa-sun-o hidden dark:inline-block"></i>
      </button>
    </div>

    <!-- 移动端导航菜单 -->
    <div id="mobile-menu" class="hidden md:hidden bg-white dark:bg-mythic-800">
      <div class="container mx-auto px-4 py-3 flex flex-col space-y-4">
        <a href="index.html"
          class="hover:text-primary dark:hover:text-cosmic-400 transition-colors duration-300 py-2">首页</a>
        <a href="tags.html"
          class="hover:text-primary dark:hover:text-cosmic-400 transition-colors duration-300 py-2">标签云</a>
        <a href="search.html"
          class="hover:text-primary dark:hover:text-cosmic-400 transition-colors duration-300 py-2">搜索</a>
        <a href="about.html"
          class="hover:text-primary dark:hover:text-cosmic-400 transition-colors duration-300 py-2">关于</a>
      </div>
    </div>
  </header>

  <!-- 主要内容 -->
  <main class="container mx-auto px-4 pt-24 pb-16">
    <!-- 页面标题 -->
    <section class="mb-12 text-center">
      <h1 class="text-[clamp(1.75rem,5vw,3rem)] font-bold text-primary dark:text-cosmic-400 mb-4">克苏鲁秘语</h1>
      <p class="text-lg text-mythic-600 dark:text-mythic-300 max-w-3xl mx-auto">探索埃及希腊神话与克苏鲁神话的神秘交汇点</p>
    </section>

    <!-- 热门标签分类 -->
    <section class="mb-12">
      <h2 class="text-2xl font-bold mb-6 flex items-center">
        <i class="fa fa-tags text-primary dark:text-cosmic-400 mr-2"></i>
        热门标签
      </h2>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <a href="#"
          class="bg-white dark:bg-mythic-800 p-4 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300 group">
          <div class="flex items-center">
            <div
              class="w-12 h-12 rounded-full bg-primary/10 dark:bg-cosmic-600/20 flex items-center justify-center text-primary dark:text-cosmic-400 group-hover:bg-primary group-hover:text-white transition-colors duration-300">
              <i class="fa fa-eye text-xl"></i>
            </div>
            <div class="ml-4">
              <h3 class="font-bold">克苏鲁神话</h3>
              <p class="text-sm text-mythic-500 dark:text-mythic-400">32 篇文章</p>
            </div>
          </div>
        </a>
        <a href="#"
          class="bg-white dark:bg-mythic-800 p-4 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300 group">
          <div class="flex items-center">
            <div
              class="w-12 h-12 rounded-full bg-secondary/10 dark:bg-secondary/20 flex items-center justify-center text-secondary dark:text-secondary group-hover:bg-secondary group-hover:text-white transition-colors duration-300">
              <i class="fa fa-university text-xl"></i>
            </div>
            <div class="ml-4">
              <h3 class="font-bold">埃及神话</h3>
              <p class="text-sm text-mythic-500 dark:text-mythic-400">24 篇文章</p>
            </div>
          </div>
        </a>
        <a href="#"
          class="bg-white dark:bg-mythic-800 p-4 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300 group">
          <div class="flex items-center">
            <div
              class="w-12 h-12 rounded-full bg-accent/10 dark:bg-accent/20 flex items-center justify-center text-accent dark:text-accent group-hover:bg-accent group-hover:text-white transition-colors duration-300">
              <i class="fa fa-shield text-xl"></i>
            </div>
            <div class="ml-4">
              <h3 class="font-bold">希腊神话</h3>
              <p class="text-sm text-mythic-500 dark:text-mythic-400">18 篇文章</p>
            </div>
          </div>
        </a>
        <a href="#"
          class="bg-white dark:bg-mythic-800 p-4 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300 group">
          <div class="flex items-center">
            <div
              class="w-12 h-12 rounded-full bg-mythic-100 dark:bg-mythic-700 flex items-center justify-center text-mythic-600 dark:text-mythic-300 group-hover:bg-mythic-200 dark:hover:bg-mythic-600 transition-colors duration-300">
              <i class="fa fa-book text-xl"></i>
            </div>
            <div class="ml-4">
              <h3 class="font-bold">神秘典籍</h3>
              <p class="text-sm text-mythic-500 dark:text-mythic-400">9 篇文章</p>
            </div>
          </div>
        </a>
      </div>
    </section>

    <!-- 博客文章列表 -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
      <!-- 左侧主内容区 -->
      <div class="lg:col-span-2">
        <!-- 文章列表 -->
        <section class="mb-12">
          <h2 class="text-2xl font-bold mb-6 flex items-center">
            <i class="fa fa-file-text-o text-primary dark:text-cosmic-400 mr-2"></i>
            最新文章
          </h2>
          <!-- 动态文章列表容器 -->
          <div id="articles-container"></div>

          <!-- 加载更多按钮 -->
          <div class="text-center">
            <button
              class="px-6 py-3 bg-primary dark:bg-cosmic-600 text-white rounded-lg hover:bg-primary/90 dark:hover:bg-cosmic-700 transition-colors duration-300 transform hover:scale-105 flex items-center mx-auto">
              <i class="fa fa-refresh mr-2"></i> 加载更多文章
            </button>
          </div>
        </section>

        <!-- 时间轴 -->
        <section class="mb-12">
          <h2 class="text-2xl font-bold mb-6 flex items-center">
            <i class="fa fa-history text-primary dark:text-cosmic-400 mr-2"></i>
            时间轴
          </h2>

          <div class="relative pl-10 space-y-8">
            <div class="timeline-line"></div>

            <div class="relative">
              <div class="timeline-dot"></div>
              <div class="ml-6 bg-white dark:bg-mythic-800 p-5 rounded-xl shadow-md">
                <div class="flex items-center mb-3">
                  <span class="text-sm font-medium text-primary dark:text-cosmic-400">2025年7月</span>
                  <span
                    class="ml-3 text-xs bg-primary/10 dark:bg-cosmic-600/20 text-primary dark:text-cosmic-400 px-3 py-1 rounded-full">新文章</span>
                </div>
                <h3 class="text-lg font-bold mb-2">《克苏鲁神话与埃及九柱神的神秘联系》发布</h3>
                <p class="text-mythic-600 dark:text-mythic-300">深入探讨两个神话体系中的相似性与可能的历史联系。</p>
              </div>
            </div>

            <div class="relative">
              <div class="timeline-dot"></div>
              <div class="ml-6 bg-white dark:bg-mythic-800 p-5 rounded-xl shadow-md">
                <div class="flex items-center mb-3">
                  <span class="text-sm font-medium text-primary dark:text-cosmic-400">2025年6月</span>
                  <span
                    class="ml-3 text-xs bg-secondary/10 dark:bg-secondary/20 text-secondary dark:text-secondary px-3 py-1 rounded-full">更新</span>
                </div>
                <h3 class="text-lg font-bold mb-2">《神秘典籍》专栏上线</h3>
                <p class="text-mythic-600 dark:text-mythic-300">新增关于《纳克特抄本》《伊波恩之书》等神秘典籍的研究文章。</p>
              </div>
            </div>

            <div class="relative">
              <div class="timeline-dot"></div>
              <div class="ml-6 bg-white dark:bg-mythic-800 p-5 rounded-xl shadow-md">
                <div class="flex items-center mb-3">
                  <span class="text-sm font-medium text-primary dark:text-cosmic-400">2025年5月</span>
                  <span
                    class="ml-3 text-xs bg-accent/10 dark:bg-accent/20 text-accent dark:text-accent px-3 py-1 rounded-full">活动</span>
                </div>
                <h3 class="text-lg font-bold mb-2">神话与克苏鲁线上研讨会</h3>
                <p class="text-mythic-600 dark:text-mythic-300">与全球神话学者共同探讨不同文化中宇宙恐怖的表现形式。</p>
              </div>
            </div>

            <div class="relative">
              <div class="timeline-dot"></div>
              <div class="ml-6 bg-white dark:bg-mythic-800 p-5 rounded-xl shadow-md">
                <div class="flex items-center mb-3">
                  <span class="text-sm font-medium text-primary dark:text-cosmic-400">2025年4月</span>
                  <span
                    class="ml-3 text-xs bg-mythic-100 dark:bg-mythic-700 text-mythic-600 dark:text-mythic-300 px-3 py-1 rounded-full">新功能</span>
                </div>
                <h3 class="text-lg font-bold mb-2">评论系统上线</h3>
                <p class="text-mythic-600 dark:text-mythic-300">添加讨论区功能，方便读者交流神话学观点。</p>
              </div>
            </div>
          </div>
        </section>
      </div>
      <!-- APlayer播放器容器 -->
      <div id="aplayer" class="rounded-lg overflow-hidden"></div>
      <!-- 右侧边栏 -->
      <div class="lg:col-span-1">


        <!-- 归档 -->
        <div class="bg-white dark:bg-mythic-800 rounded-xl shadow-md p-6 mb-8">
          <h3 class="text-xl font-bold mb-4 flex items-center">
            <i class="fa fa-archive text-primary dark:text-cosmic-400 mr-2"></i>
            文章归档
          </h3>
          <div class="space-y-2">
            <a href="archive.html"
              class="block p-3 bg-mythic-50 dark:bg-mythic-700 rounded-lg hover:bg-primary/10 dark:hover:bg-cosmic-600/20 transition-colors duration-300 flex justify-between items-center">
              <span>2025年7月</span>
              <span
                class="bg-primary/10 dark:bg-cosmic-600/20 text-primary dark:text-cosmic-400 px-2 py-1 rounded-full text-xs">8篇</span>
            </a>
            <a href="archive.html"
              class="block p-3 bg-mythic-50 dark:bg-mythic-700 rounded-lg hover:bg-primary/10 dark:hover:bg-cosmic-600/20 transition-colors duration-300 flex justify-between items-center">
              <span>2025年6月</span>
              <span
                class="bg-primary/10 dark:bg-cosmic-600/20 text-primary dark:text-cosmic-400 px-2 py-1 rounded-full text-xs">12篇</span>
            </a>
            <a href="archive.html"
              class="block p-3 bg-mythic-50 dark:bg-mythic-700 rounded-lg hover:bg-primary/10 dark:hover:bg-cosmic-600/20 transition-colors duration-300 flex justify-between items-center">
              <span>2025年5月</span>
              <span
                class="bg-primary/10 dark:bg-cosmic-600/20 text-primary dark:text-cosmic-400 px-2 py-1 rounded-full text-xs">15篇</span>
            </a>
            <a href="archive.html"
              class="block p-3 bg-mythic-50 dark:bg-mythic-700 rounded-lg hover:bg-primary/10 dark:hover:bg-cosmic-600/20 transition-colors duration-300 flex justify-between items-center">
              <span>2025年4月</span>
              <span
                class="bg-primary/10 dark:bg-cosmic-600/20 text-primary dark:text-cosmic-400 px-2 py-1 rounded-full text-xs">9篇</span>
            </a>
            <a href="archive.html"
              class="block p-3 bg-mythic-50 dark:bg-mythic-700 rounded-lg hover:bg-primary/10 dark:hover:bg-cosmic-600/20 transition-colors duration-300 flex justify-between items-center">
              <span>2025年3月</span>
              <span
                class="bg-primary/10 dark:bg-cosmic-600/20 text-primary dark:text-cosmic-400 px-2 py-1 rounded-full text-xs">7篇</span>
            </a>
          </div>
        </div>

        <!-- 热门标签 -->
        <div class="bg-white dark:bg-mythic-800 rounded-xl shadow-md p-6 mb-8">
          <h3 class="text-xl font-bold mb-4 flex items-center">
            <i class="fa fa-tags text-primary dark:text-cosmic-400 mr-2"></i>
            热门标签
          </h3>
          <div class="flex flex-wrap gap-2">
            <a href="#"
              class="px-3 py-1 bg-primary/10 dark:bg-cosmic-600/20 text-primary dark:text-cosmic-400 rounded-full text-sm hover:bg-primary hover:text-white dark:hover:bg-cosmic-600 transition-colors duration-300">克苏鲁神话</a>
            <a href="#"
              class="px-3 py-1 bg-secondary/10 dark:bg-secondary/20 text-secondary dark:text-secondary rounded-full text-sm hover:bg-secondary hover:text-white dark:hover:bg-secondary transition-colors duration-300">埃及神话</a>
            <a href="#"
              class="px-3 py-1 bg-accent/10 dark:bg-accent/20 text-accent dark:text-accent rounded-full text-sm hover:bg-accent hover:text-white dark:hover:bg-accent transition-colors duration-300">希腊神话</a>
            <a href="#"
              class="px-3 py-1 bg-mythic-100 dark:bg-mythic-700 text-mythic-600 dark:text-mythic-300 rounded-full text-sm hover:bg-mythic-200 dark:hover:bg-mythic-600 transition-colors duration-300">旧日支配者</a>
            <a href="#"
              class="px-3 py-1 bg-mythic-100 dark:bg-mythic-700 text-mythic-600 dark:text-mythic-300 rounded-full text-sm hover:bg-mythic-200 dark:hover:bg-mythic-600 transition-colors duration-300">神秘学</a>
            <a href="#"
              class="px-3 py-1 bg-mythic-100 dark:bg-mythic-700 text-mythic-600 dark:text-mythic-300 rounded-full text-sm hover:bg-mythic-200 dark:hover:bg-mythic-600 transition-colors duration-300">考古学</a>
            <a href="#"
              class="px-3 py-1 bg-mythic-100 dark:bg-mythic-700 text-mythic-600 dark:text-mythic-300 rounded-full text-sm hover:bg-mythic-200 dark:hover:bg-mythic-600 transition-colors duration-300">神话对比</a>
            <a href="#"
              class="px-3 py-1 bg-mythic-100 dark:bg-mythic-700 text-mythic-600 dark:text-mythic-300 rounded-full text-sm hover:bg-mythic-200 dark:hover:bg-mythic-600 transition-colors duration-300">禁忌知识</a>
          </div>
        </div>

        <!-- 关于博主 -->
        <div class="bg-white dark:bg-mythic-800 rounded-xl shadow-md p-6">
          <h3 class="text-xl font-bold mb-4 flex items-center">
            <i class="fa fa-user text-primary dark:text-cosmic-400 mr-2"></i>
            关于博主
          </h3>
          <div class="text-center">
            <img src="https://picsum.photos/id/1005/200/200" alt="博主头像"
              class="w-24 h-24 rounded-full mx-auto mb-4 object-cover border-4 border-primary/20 dark:border-cosmic-600/20">
            <h4 class="font-bold text-lg mb-2">克苏鲁学者</h4>
            <p class="text-mythic-600 dark:text-mythic-300 mb-4">神话学研究者，专注于克苏鲁神话与古埃及、古希腊神话的交叉研究。</p>
            <div class="flex justify-center space-x-4">
              <a href="#"
                class="text-mythic-500 dark:text-mythic-400 hover:text-primary dark:hover:text-cosmic-400 transition-colors duration-300">
                <i class="fa fa-twitter"></i>
              </a>
              <a href="#"
                class="text-mythic-500 dark:text-mythic-400 hover:text-primary dark:hover:text-cosmic-400 transition-colors duration-300">
                <i class="fa fa-github"></i>
              </a>
              <a href="#"
                class="text-mythic-500 dark:text-mythic-400 hover:text-primary dark:hover:text-cosmic-400 transition-colors duration-300">
                <i class="fa fa-linkedin"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>

  <!-- 页脚 -->
  <footer class="bg-mythic-800 dark:bg-mythic-900 text-white py-12">
    <div class="container mx-auto px-4">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
        <div>
          <h3 class="text-xl font-bold mb-4 flex items-center">
            <i class="fa fa-eye text-primary mr-2"></i>
            克苏鲁秘语
          </h3>
          <p class="text-mythic-300 mb-4">探索神话与未知的边界，揭示克苏鲁与古文明的神秘联系。</p>
          <div class="flex space-x-4">
            <a href="#" class="text-mythic-400 hover:text-primary transition-colors duration-300">
              <i class="fa fa-twitter"></i>
            </a>
            <a href="#" class="text-mythic-400 hover:text-primary transition-colors duration-300">
              <i class="fa fa-github"></i>
            </a>
            <a href="#" class="text-mythic-400 hover:text-primary transition-colors duration-300">
              <i class="fa fa-linkedin"></i>
            </a>
            <a href="#" class="text-mythic-400 hover:text-primary transition-colors duration-300">
              <i class="fa fa-youtube-play"></i>
            </a>
          </div>
        </div>

        <div>
          <h3 class="text-lg font-bold mb-4">快速链接</h3>
          <ul class="space-y-2">
            <li><a href="index.html" class="text-mythic-300 hover:text-primary transition-colors duration-300">首页</a>
            </li>
            <li><a href="tags.html" class="text-mythic-300 hover:text-primary transition-colors duration-300">标签云</a>
            </li>
            <li><a href="search.html" class="text-mythic-300 hover:text-primary transition-colors duration-300">搜索</a>
            </li>
            <li><a href="about.html" class="text-mythic-300 hover:text-primary transition-colors duration-300">关于</a>
            </li>
            <li><a href="archive.html"
                class="text-mythic-300 hover:text-primary transition-colors duration-300">文章归档</a></li>
          </ul>
        </div>

        <div>
          <h3 class="text-lg font-bold mb-4">热门标签</h3>
          <div class="flex flex-wrap gap-2">
            <a href="#"
              class="px-3 py-1 bg-mythic-700 text-mythic-300 rounded-full text-xs hover:bg-primary hover:text-white transition-colors duration-300">克苏鲁神话</a>
            <a href="#"
              class="px-3 py-1 bg-mythic-700 text-mythic-300 rounded-full text-xs hover:bg-primary hover:text-white transition-colors duration-300">埃及神话</a>
            <a href="#"
              class="px-3 py-1 bg-mythic-700 text-mythic-300 rounded-full text-xs hover:bg-primary hover:text-white transition-colors duration-300">希腊神话</a>
            <a href="#"
              class="px-3 py-1 bg-mythic-700 text-mythic-300 rounded-full text-xs hover:bg-primary hover:text-white transition-colors duration-300">旧日支配者</a>
            <a href="#"
              class="px-3 py-1 bg-mythic-700 text-mythic-300 rounded-full text-xs hover:bg-primary hover:text-white transition-colors duration-300">神秘学</a>
            <a href="#"
              class="px-3 py-1 bg-mythic-700 text-mythic-300 rounded-full text-xs hover:bg-primary hover:text-white transition-colors duration-300">考古学</a>
          </div>
        </div>

        <div>
          <h3 class="text-lg font-bold mb-4">订阅更新</h3>
          <p class="text-mythic-300 mb-4">订阅我们的电子邮件，获取最新的神话学研究。</p>
          <form class="space-y-2">
            <div>
              <input type="email" placeholder="您的邮箱地址"
                class="w-full px-4 py-2 bg-mythic-700 border border-mythic-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
            </div>
            <button type="submit"
              class="w-full px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors duration-300">
              订阅
            </button>
          </form>
        </div>
      </div>

      <div class="border-t border-mythic-700 mt-8 pt-8 text-center text-mythic-400 text-sm">
        <p>&copy; 2025 克苏鲁秘语. 保留所有权利.</p>
      </div>
    </div>
  </footer>

  <!-- JavaScript -->
  <script>
    // 导航栏滚动效果
    window.addEventListener('scroll', function () {
      const navbar = document.getElementById('navbar');
      if (window.scrollY > 50) {
        navbar.classList.add('shadow-md');
        navbar.classList.remove('py-3');
        navbar.classList.add('py-2');
      } else {
        navbar.classList.remove('shadow-md');
        navbar.classList.remove('py-2');
        navbar.classList.add('py-3');
      }
    });

    // 移动端菜单切换
    document.getElementById('menu-toggle').addEventListener('click', function () {
      const mobileMenu = document.getElementById('mobile-menu');
      mobileMenu.classList.toggle('hidden');
    });

    // 主题切换
    document.getElementById('theme-toggle').addEventListener('click', function () {
      document.documentElement.classList.toggle('dark');

      // 存储用户偏好
      if (document.documentElement.classList.contains('dark')) {
        localStorage.setItem('theme', 'dark');
      } else {
        localStorage.setItem('theme', 'light');
      }
    });

    // 检查用户之前的偏好
    if (localStorage.getItem('theme') === 'dark' ||
      (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }

    // 平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function (e) {
        e.preventDefault();

        document.querySelector(this.getAttribute('href')).scrollIntoView({
          behavior: 'smooth'
        });
      });
    });
  </script>
</body>

</html>
<!-- 导入 jquery -->
<script src="js/jquery.min.js"></script>
<!-- 引入APlayer JS -->
<script src="js/APlayer.min.js"></script>

<script src="js/data.js"></script>

<script>
    // jQuery页面加载完成后执行
  $(document).ready(function () {
     // 调用文章加载方法
    loadArticles();
 
  });
</script>
<script>
  // 初始化APlayer
  const ap = new APlayer({
    container: document.getElementById('aplayer'),
    fixed: true,

    audio: [
      {
        name: '你看 世界好美',
        artist: '香奈美',
        url: 'https://music.163.com/song/media/outer/url?id=2121029687.mp3',
        cover: 'http://p2.music.126.net/uMqcCdj7NIRlMGCjXQ2M4w==/109951169287458186.jpg?param=130y130'
      },
      {
        name: '卡拉彼丘',
        artist: 'To The Beautiful',
        url: 'https://music.163.com/song/media/outer/url?id=2072260061.mp3',
        cover: 'http://p1.music.126.net/D6kXHmfFQ93gcaSQ2WkdaQ==/109951168832244806.jpg?param=130y130'
      }
    ],
    autoplay: false,
    theme: '#8B5CF6',
    loop: 'all',
    volume: 0.7,
    mutex: true
  });

  // 主题切换适配
  const isDarkMode = localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches);
  if (isDarkMode) {
    document.documentElement.classList.add('dark');
    ap.setTheme('#7C3AED');
  }

  // 监听主题切换事件
  document.getElementById('theme-toggle').addEventListener('click', function () {
    const isDark = document.documentElement.classList.toggle('dark');
    ap.setTheme(isDark ? '#7C3AED' : '#8B5CF6');
  });
</script>
<!-- 文章数据加载脚本 -->
<script>
  
  // 抽取文章加载逻辑为独立方法
  function loadArticles() {
    const $articlesContainer = $("#articles-container");
    $articlesContainer.empty();
  
    // 遍历文章数据并生成HTML
    $.each(articlesData, function(index, article) {
      const articleHtml = `
        <article class="bg-white dark:bg-mythic-800 rounded-xl shadow-md overflow-hidden mb-8 hover:shadow-lg transition-shadow duration-300 transform hover:-translate-y-1">
          <div class="md:flex">
            <div class="md:w-1/3">
              <img src="${article.imageUrl}" alt="${article.title}" class="w-full h-48 md:h-full object-cover">
            </div>
            <div class="md:w-2/3 p-6">
              <div class="flex items-center mb-3">
                <span class="text-xs bg-secondary/10 dark:bg-secondary/20 text-secondary dark:text-secondary px-3 py-1 rounded-full">${article.category}</span>
                <span class="text-xs text-mythic-500 dark:text-mythic-400 ml-3"><i class="fa fa-calendar-o mr-1"></i> ${article.date}</span>
              </div>
              <h3 class="text-xl font-bold mb-3 hover:text-primary dark:hover:text-cosmic-400 transition-colors duration-300">
                <a href="${article.url}">${article.title}</a>
              </h3>
              <p class="text-mythic-600 dark:text-mythic-300 mb-4 line-clamp-3">${article.excerpt}</p>
              <div class="flex items-center justify-between">
                <div class="flex items-center">
                  <img src="${article.authorAvatar}" alt="${article.author}" class="w-10 h-10 rounded-full">
                  <span class="ml-3 text-sm font-medium">${article.author}</span>
                </div>
                <a href="${article.url}" class="text-primary dark:text-cosmic-400 hover:underline flex items-center">
                  阅读更多 <i class="fa fa-long-arrow-right ml-1"></i>
                </a>
              </div>
            </div>
          </div>
        </article>
      `;
      $articlesContainer.append(articleHtml);
    });
  }
</script>
</body>

</html>